<template>
	<view class="invite-page" :style="detail.pageBackground?'background:'+detail.pageBackground:''">
		<view class="big-image">
			<image :src="detail.kvImgUrl" mode="widthFix"></image>
		</view>
		<view v-if="detail.ruleContent" class="invite-intro" :style="detail.ruleStyle||''">
			<view class="intro-title">
				活动规则
			</view>
			<text>{{detail.ruleContent||''}}</text>
		</view>
		<!-- <view class="invite-padding"></view> -->
		<view class="btn-container">
			<view v-if="detail.ruleContent" class="bg-task"></view>
			<button class="invite-btn" :style="detail.buttonStyle||''" open-type="share">立即邀请</button>
		</view>
		
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				id: '',
				detail: {
					kvImgUrl:'',
					pageBackground:'',
					ruleStyle:'',
					ruleContent:'',
					buttonStyle:''
				}
			};
        },
        onLoad(data) {
			this.id = data.id || ''
			this.init()
        },
		computed:{
			...mapState(['userInfo','accessToken']),
		},
        methods:{
            onShareAppMessage(){
            	return {
            		title: `邀请您加入八爪鱼`,
            		path: `/pages/personalCenter/index/index?recUser=${this.userInfo.id}`
            	}
            },
			async init(){
				const res = await this.$api.getActivityRuleDetail({},this.id)
				if(res && res.code == 200){
					this.detail = res.data
				}
			}
        }
	}
</script>

<style scoped lang="scss">
	.invite-page{
		background-color: #2E87FF;
		min-height: 100vh;
		position: relative;
		.big-image{
			image{
				width: 100%;
			}
		}
		.invite-intro{
			width: 690rpx;
			border-radius: 25rpx 25rpx 0 0;
			min-height: 400rpx;
			background-color: rgba(86,157,252,.8);
			margin: 0 auto;
			color: #FFFFFF;
			padding: 30rpx 30rpx 200rpx;
			text-align: justify;
			.intro-title{
				text-align: center;
				font-size: inherit;
				margin-bottom: 20rpx;
			}
			text{
				font-size: 28rpx;
			}
		}
		.invite-padding{
			// height: 220rpx;
			width: 100%;
		}
		.btn-container{
			height: 230rpx;
			position: fixed;
			left: 50%;
			margin-left: -344rpx;
			bottom: 0;
			width: 688rpx;
			.bg-task{
				width: 100%;
				height: 100%;
				background: linear-gradient(to bottom, rgba(86,157,252,0) 0%, rgba(86,157,252,1) 28%, rgba(86,157,252,1) 100%);
			}
			.invite-btn{
				position: absolute;
				left: 50%;
				margin-left: -330rpx;
				width: 660rpx;
				height: 118rpx;
				line-height: 100rpx;
				color: #FFFFFF;
				font-size: 34rpx;
				text-align: center;
				bottom: 40rpx;
				background: url($public-baseImgUrl+'invite-btn.png') center no-repeat;
				background-size: 100% 100%;
				&:after{
					border: none!important;
				}
			}
		}
		
	}
</style>
